<template>
  <div>
    <h1>修改收货地址</h1>
    <div class="people">
        <!-- <span>收货人</span> <input type="text" id="people">  -->
    <span>收货人</span> <el-input  v-model="addresslist.addPerson" autocomplete="off"></el-input>
    </div>
    <div class="phone">
       <span>收货人电话</span> <el-input  v-model="addresslist.addPhone" autocomplete="off"></el-input>
       
        
    </div>
   
    <el-form class="city">
            <el-form-item label="收货地址" :label-width="formLabelWidth">
                <el-select
                  v-model="addresslist.addProvince"
                  placeholder="请选择省"
                  style="width: 145px"
                >
                  <el-option
                    v-for="item in provinces"
                    size="small"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @click.native="changeProvince()"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="addresslist.addCity"
                  placeholder="请选择市"
                  style="width: 145px"
                >
                  <el-option
                    v-for="item in cities"
                    size="small"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @click.native="changeCity"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="addresslist.addDistrict"
                  placeholder="请选择区"
                  style="width: 145px"
                >
                  <el-option
                    v-for="item in area"
                    size="small"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
          </el-form>
          <div class="adress">
          <span>详细地址</span> <el-input  v-model="addresslist.addDetail" autocomplete="off"></el-input>
          </div>
          <span class="defult">设置为默认地址</span> <br>
         
  <el-switch class="switch"
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="0"
    inactive-value="1">
  </el-switch>


          <div>
        <el-button class="b" type="text"  @click="update">修改</el-button>
        <el-button class="c" type="text" @click="back">返回</el-button>
          </div>
  </div>
</template>

<script>
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
import {mapState,mapGetters} from 'vuex'
import router from "@/router";
export default {
   computed:{
       ...mapGetters('address',['getaddresslist']),
       ...mapState('address',['addresslist'])
    },  
   data(){
     return{
       value:0,
       
        //省市区联动下拉框
      addlist:this.addresslist,
      provinces: regionData,
      cities: [],
      area: [],
      selectProvince: "",
      selectCity: "",
      selectArea: "",
      people:'',
      phone:'',
      adress:'',
      formLabelWidth:'',
     }
   },
   methods:{
     changeProvince() {
       //console.log(this.provinces)
       //console.log(this.selectProvince)
      this.cities = [];
      this.area = [];
      this.addresslist.addCity = "";
      this.addresslist.addDistrict = "";
      let cityItem = this.provinces.filter(
        (item) => item.value === this.addresslist.addProvince
      );
      if (cityItem[0]) {
        this.cities = cityItem[0].children;
      }
    },
    changeCity() {
      console.log("城市选择")
      console.log(this.selectCity)
      this.area = [];
      this.addresslist.addDistrict = "";
      let areaItem = this.cities.filter(
        (item) => item.value === this.addresslist.addCity
      );
      if (areaItem[0]) {
        this.area = areaItem[0].children;
      }
    },
    back(){
      // this.$router.push("/getGoodsAddress")
      router.back()
    },
    update(){
      let type =/^[0-9]*$/
      let addProvince = type.test(this.addresslist.addProvince)
      let addCity = type.test(this.addresslist.addCity)
      let addDistrict = type.test(this.addresslist.addDistrict)
      if(addProvince ||addCity||addDistrict){
         this.addresslist.addProvince= CodeToText[this.addresslist.addProvince]
      this.addresslist.addCity= CodeToText[this.addresslist.addCity]
     this.addresslist.addDistrict = CodeToText[this.addresslist.addDistrict]
      let fd = new FormData
      fd.append("addPerson",this.addresslist.addPerson)
      fd.append("addPhone",this.addresslist.addPhone)
      fd.append("addProvince",this.addresslist.addProvince)
      fd.append("addCity",this.addresslist.addCity)
      fd.append("addDistrict",this.addresslist.addDistrict)
      fd.append("addDetail",this.addresslist.addDetail)
      fd.append("addressId",this.addresslist.addressId)
      this.$axios.post("/api/userAddress/updateAddress",fd).then(
        res=>{
          console.log(res.data)
        }
      )
      }else{
        let fd = new FormData
      fd.append("addPerson",this.addresslist.addPerson)

      fd.append("addPhone",this.addresslist.addPhone)
      fd.append("addProvince",this.addresslist.addProvince)
      fd.append("addCity",this.addresslist.addCity)
      fd.append("addDistrict",this.addresslist.addDistrict)
      fd.append("addDetail",this.addresslist.addDetail)
      fd.append("addressId",this.addresslist.addressId)
      this.$axios.post("/api/userAddress/updateAddress",fd).then(
        res=>{
          console.log(res.data)
        }
      )
      }
      if(this.value==0){
        console.log(this.value)
      let fd = new FormData
      fd.append("userId",this.addresslist.userId)
      fd.append("addressId",this.addresslist.addressId)
        this.$axios.post("/api/userAddress/updateDefultAddress",fd).then(
          res=>{
            console.log(res.data)
          }
        )
      }
      // this.$router.push("/getGoodsAddress")
      router.back()
    }
   }
    
}
</script>

<style>
 
.city{
  width: 200px;
  height: 200px;
  margin: auto;
}

.people{
  width: 200px;
  height: 100px;
  margin: auto;
}
.phone{
  width: 200px;
  height: 100px;
  margin: auto;
}

.adress{
  width: 200px;
  height: 100px;
  margin: auto;
}
.b{
  margin-top: 50px;
  margin-left: 800px;
}

.c{
  margin-top: 50px;
  margin-left: 500px;
}
.switch{
  margin-left: 750px;
}
.defult{
  margin-left: 750px;
}

</style>